<template>
	<view class="contents" :style="'height:'+screenHeight+'px;'">
		<view class="top">
			<u-subsection :list="list" v-model="current" @change="changes" mode="button" active-color="#ffffff"
				button-color="#409EFF" bg-color="#ffffff"></u-subsection>
		</view>
		<view class="" v-if="show">
			<u-collapse :arrow="false" @change="handleOpenChange">
				<u-collapse-item v-for="(item, index) in orderlist" :key="index" style="height: 100%;"
					ref="collapseHeight">
					<template v-slot:title>
						<view class="leftf">
							<view class="information">
								<view class="gray">检查项目：<span class="black">{{item.feename}}</span></view>
								<view class="gray">时间：<span class="black">{{item.datetime}}</span></view>
							</view>

							<view class="rightbutton">
								<view class="label" style="background-color: #E6A23C;" v-if="item.type==1">
									<span>门诊</span>
								</view>
								<view class="label" style="background-color: #00aaff;" v-if="item.type==2">
									<span>住院</span>
								</view>
							</view>
						</view>
					</template>

					<view class="card-container" v-if="current==0">
						<u-table class="custom-card-table">
							<u-tr>
								<u-th style="background-color: #00aaff;color: white;">项目</u-th>
								<u-th style="background-color: #00aaff;color: white;">单位</u-th>
								<u-th style="background-color: #00aaff;color: white;">具体数值</u-th>
								<u-th style="background-color: #00aaff;color: white;">范围</u-th>
							</u-tr>
							<u-tr v-for="(item2, index) in item.list" :key="index">
								<u-td>{{ item2.name }}</u-td>
								<u-td>{{ item2.dw }}</u-td>
								<u-td :style="{ color: item2.state != null ? 'red' : '' }">
								  {{item2.value}}{{ item2.state==null?"":item2.state}}
								</u-td>
								<u-td>{{ item2.ckfw }}</u-td>
							</u-tr>
						<!-- <view class="label" style="background-color: #E6A23C;" v-if="item.type==1" @click="showPDF()">
							<span>查看PDF</span>
						</view> -->
						</u-table>
						
					</view>
					<view class="" v-for="(item2,index) in item.list" :key="index" v-else>
						<view class="bodyy">
							<view class="gray">项目：<span class="black">{{item2.name}}</span></view>
							<view class="gray">诊断描述：<span class="black">{{item2.lcsj}}</span></view>
							<view class="gray">结果：<span class="black">{{item2.lczd}}</span></view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>


		</view>
		<view class="none" v-else>
			<view class="coent">
				<u-empty text="当前暂无记录" mode="data" icon="/static/zwnr.png" icon-size="200">
				</u-empty>
			</view>
		</view>
		<u-modal :show="deleteshow" :showCancelButton="true" :title="title" :content='content' @confirm="confirm()"
			@cancel="deleteshow=false"></u-modal>
		<u-modal :show="showdeletes" :showCancelButton="true" :title="deletetitle" :content='deletecontent'
			@confirm="deletesconfirm()" @cancel="showdeletes=false"></u-modal>
		<u-modal :show="showrefund" :showCancelButton="true" :title="refundtitle" :content='refundcontent'
			@confirm="refundconfirm()" @cancel="showrefund=false"></u-modal>






	</view>
	<u-modal v-if="doctorshow" v-model="newshow" title="预约挂号条款" confirm-color='#55aaff'
		:title-style="{ fontWeight: 'bold'}" confirm-text="前往就诊人管理" :show-cancel-button="false" @confirm="newconfirm"
		:mask-close-able="false">
		<view class="slot-content">

			<view class="" style="padding: 20px;">
				<view class="" style="text-align: center;">

				</view>
				<view class="">
					当前暂无就诊人，请前往就诊人管理页面添加就诊人。
				</view>
			</view>

		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {

				screenHeight: getApp().globalData.screenHeight,
				list: [{
					Status: 0,
					name: '检验报告'
				}, {
					Status: 1,
					name: '检查报告'
				}],
				newshow: true,

				doctorshow: true,
				current: 0,
				showdeletes: false,
				deleteshow: false,
				showrefund: false,
				page: 1,
				rows: 20,
				Status: 'all',
				orderlist: [],
				title2: "66666",
				title: '取消预约',
				content: '取消预约之后不可恢复，是否确认',
				deletetitle: '删除预约记录',
				deletecontent: '删除预约记录之后不可恢复，是否确认',
				refundtitle: '退款',
				refundcontent: '退款之后不可恢复，是否确认',
				OrderNumber: '',
				openid: '',
				month: '',
				day: '',
				show: true
			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo'])
		},
		onLoad: function(option) {
			console.log("optino", option)


			this.getjiuzhen()
		},
		onPullDownRefresh() {
			this.recordlist()
			uni.stopPullDownRefresh()
		},

		onShow() {
			if (this.hasLogin) {

				this.$store.dispatch('getUserInfo');
				//this.recordlist()
				if (this.current == 0) {
					this.getlis()

				} else if (this.current == 1) {
					this.getpacs()
				}
			} else {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}
		},
		methods: {
			// gettype(text) {

			// 	if (text == 0)
			// 		return '住院'
			// 	else
			// 		return '门诊'
			// },
			detail(OrderId) {
				console.log("OrderId", OrderId)
				uni.navigateTo({
					url: `/pages/register/Scheduling/record/recorddetail?OrderId=${OrderId}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			newconfirm() {

				// 3秒后自动关闭
				// this.doctorshow = false;
				// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
				// this.$refs.uModal1.clearLoading();
				console.log("开始跳转")
				uni.redirectTo({
					url: `/pages/block/Visit/Visit`,
					fail(error) {
						console.log(error)
					}
				})



			},
			getjiuzhen() {
				this.$request("patient", "defaultInfo")
					.then(res => {
						console.log("获取默认就诊人", res)
						if (res.code == 1) {
							this.doctorshow = false
						} else {
							this.doctorshow = true
						}

					});


			},

			handleOpenChange() {
				let long = this.$refs.collapseHeight.length;
				setTimeout(() => {
					for (let i = 0; i < long; i++) {
						this.$refs.collapseHeight[i].queryRect(); // 计算高度
					}
				}, 50)
			},

			change(e) {
				console.log("e:", e);
				this.sousuo.dy = e
				this.getlistpage()
			},
			getMpWxCode(OrderNumber) {
				uni.login({
					success: async resCode => {
						console.log("rescode", resCode)
						let res = await this.$request('auth', 'getopenid', {
							Code: resCode.code
						});

						if (res.code === 1) {
							console.log("res", res)
							this.appid = res.data.appid;
							this.sessionkey = res.data.session_key;
							this.openid = res.data.openid;
							this.pays(OrderNumber)
						}
					}
				})
			},

			pays(OrderNumber) {
				console.log(OrderNumber)
				this.$request("pay", "pay", {
					OrderNo: OrderNumber,
					openid: this.openid,
				}).then(resto => {
					console.log(resto)
					if (resto.code == 1) {
						uni.showLoading({
							title: '请等待'
						})
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resto.data.Timestamp,
							package: resto.data.Package,
							nonceStr: resto.data.Noncestr,
							signType: resto.data.SignType,
							paySign: resto.data.paySign,
							success: (resshree) => {
								console.log(resshree)

								uni.hideLoading();
								this.recordlist()
							},
							fail: (err) => {
								console.log(err)
								uni.hideLoading();
								this.recordlist()
							}

						})

					}

				})

			},
			changes(index) {

				// console.log(index)
				// this.current = index
				// this.Status = this.list[index].Status
				// console.log("this.list[index].Status", this.Status)
				// this.recordlist()

				this.current = index

				//this.Status = this.list[index].Status
				//console.log("this.list[index].Status", this.Status)
				//this.recordlist()
				console.log(index, "牛逼")
				this.Status = index
				uni.showLoading({
					title:"加载中"
				})
				if (index == 0) {
					this.getlis()

				} else if (index == 1) {
					this.getpacs()

				}
			},

			getlis() {

				this.$request("lis", "info", {}).then(res => {
					if (res.code == 1) {
						console.log(this.Status)
						this.orderlist = res.data.resultdata

						if (this.orderlist.length != 0) {
							this.show = true
							// this.month=this.formattedDatemonth(res.data.rows[0].VisitDay)
							// this.day=this.formattedDateday(res.data.rows[0].VisitDay)

						} else {
							this.show = false
						}

						uni.hideLoading();
						console.log(res)

					} else {
						this.show = false
						uni.hideLoading();
					}

				})

			},



			getpacs() {
				this.$request("pacs", "info", {}).then(res => {
					if (res.code == 1) {

						console.log("调用了")
						this.orderlist = res.data.resultdata
						console.log(this.orderlist)
						if (this.orderlist.length != 0) {

							this.show = true
							// this.month=this.formattedDatemonth(res.data.rows[0].VisitDay)
							// this.day=this.formattedDateday(res.data.rows[0].VisitDay)
							
						} else {
							this.show = false
						}

						uni.hideLoading();
						console.log(res)

					} else {
						this.show = false
						uni.hideLoading();

					}

				})
			},





			deletesconfirm() {
				//console.log(this.OrderNumber)
				this.$request("Order", "Delete", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showdeletes = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			refundconfirm() {
				console.log(this.OrderNumber)
				this.$request("pay", "refund", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showrefund = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			confirm() {
				console.log(this.OrderNumber)
				this.$request("Order", "Cancel", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.deleteshow = false
						console.log(res)
					}
				})
			},
			removes(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.deleteshow = true
			},
			refund(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.showrefund = true
			},
			deletesd(OrderNumber) {
				this.showdeletes = true
				this.OrderNumber = OrderNumber
			},
			formattedDatemonth(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					month: 'short'
				}).replace(/\//g, '月');
			},
			formattedDateday(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					day: 'numeric'
				}).replace(/\//g, '月');
			},
			// recordlist() {
			// 	uni.showLoading({
			// 		title: '加载中'
			// 	})
			// 	this.Status = this.list[this.current].Status
			// 	this.$request("Order", "List", {
			// 		page: this.page,
			// 		rows: this.rows,
			// 		Status: this.Status
			// 	}).then(res => {
			// 		if (res.code == 1) {
			// 			this.orderlist = res.data.rows
			// 			if(this.orderlist.length!=0){
			// 				this.show=true
			// 				this.month=this.formattedDatemonth(res.data.rows[0].VisitDay)
			// 				this.day=this.formattedDateday(res.data.rows[0].VisitDay)
			// 			}else{
			// 				this.show=false
			// 			}

			// 			uni.hideLoading();
			// 			console.log(res)
			// 		}
			// 	})
			// }
		}
	}
</script>

<style>
	.left {
		background-color: rgba(127, 255, 212, 0.4);
		width: 3px;
		height: 100%;
		line-height: 200px;
	}



	.zuo {
		float: left;
		height: 100%;
		width: 5%;
		padding-top: 15px;
	}

	.you {
		width: 30%;
		float: left;
	}

	.you span {
		padding: 15px;
	}

	.top {
		background-color: white;
	}

	.middle {
		background-color: #F5F5F5;
		padding-bottom: 60rpx;
	}

	.bodyy {
		height: 100%;
		width: 100%;
		padding: 30rpx 30rpx 10rpx 30rpx;
		position: relative;
		background-color: white;
		box-shadow: 2rpx 2rpx 12rpx gainsboro;
	}

	.leftf {
		width: 100%;
		height: 100%;
		background-color: white;
		box-shadow: 2rpx 2rpx 12rpx gainsboro;
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 30rpx;
		display: flex;

	}

	.date {
		width: 18%;
		height: 100%;
		border-right: 1rpx #F5F5F5 solid;
		font-size: 45rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.rightbutton {
		text-align: right;
		width: 20%;
	}

	.label {
		text-align: right;
		color: white;
		padding: 15rpx 10rpx 15rpx 40rpx;
		border-top-left-radius: 35rpx;
		border-bottom-left-radius: 35rpx;
	}

	.butt {
		width: 100%;
		text-align: right;
	}

	.information {
		width: 80%;
		height: 100%;

		padding-left: 10rpx;


	}

	.gray {
		color: gray;
	}

	.primary {
		color: #409EFF;
		font-size: 35rpx;
	}

	.black {
		color: black;
	}

	.one {
		text-align: right;
		font-weight: bold;
		font-size: 40rpx;
	}

	.two {
		height: 40%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.twoconter {
		display: flex;
		align-items: center;
		height: 10%;
	}

	.twoicon {
		height: 100%;
		display: flex;
		justify-content: center;

		width: 10%;
	}

	.three {
		padding: 20rpx;
		font-weight: bold;
	}

	.four {
		margin-top: 60rpx;
		padding: 30rpx;
	}

	.none {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.qrcodes {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.setCord {

		height: 500px;

	}


	/* 卡片容器 */
	.card-container {
		padding: 0 15px;
		/* 左右边距 */
		margin: 15px 0;
	}

	/* 卡片式表格 */
	.custom-card-table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	/* 移除所有边框 */
	.custom-card-table ::v-deep .u-table,
	.custom-card-table ::v-deep .u-tr,
	.custom-card-table ::v-deep .u-th,
	.custom-card-table ::v-deep .u-td {
		border: none !important;
	}

	/* 表头样式 */
	.custom-card-table ::v-deep .u-th {
		background-color: #f8fafc;
		font-weight: 600;
		color: #334155;
		padding: 16px 12px;
		font-size: 15px;
	}

	/* 单元格样式 */
	.custom-card-table ::v-deep .u-td {
		padding: 14px 12px;
		color: #475569;
		font-size: 14px;
		border-bottom: 1px solid #f1f5f9 !important;
		/* 细分割线 */
	}

	/* 最后一行去掉底部分割线 */
	.custom-card-table ::v-deep .u-tr:last-child .u-td {
		border-bottom: none !important;
	}

	/* 行悬浮效果 */
	.custom-card-table ::v-deep .u-tr:hover {
		background-color: #f8fafc;
	}

	/* 隔行变色 */
	.custom-card-table ::v-deep .u-tr:nth-child(even) {
		background-color: #f9fafb;
	}
</style>